<style>
	.slider .layui-slider .layui-slider-bar{background: rgb(55, 114, 232) !important;}
	.slider .layui-slider .layui-slider-wrap .layui-slider-wrap-btn{border: 2px solid #3772E8 !important;}
	.dsn-panel-editor-cube table{width: auto;}
	.dsn-panel-editor-relative {width:100%;height: auto;position: relative;}
	.dsn-panel-editor-line {overflow: hidden;background: #fff;border:none;border-radius: 3px;margin-top: 0px;padding: 0px;}
	.dsn-panel-editor-goodimg-t2{height: 22px;width: 88px;background: rgba(0,0,0,0.5);position: absolute;left: 0px;bottom: 0px;font-size: 12px;text-align: center;line-height: 22px;color: #fff;}
	.dsn-panel-editor-line-right .layui-input-inline{background: #F7F7F7;}
	.dsn-panel-editor-line-right .layui-input-inline .layui-input{border:none;background:none;width: 200px;}
	.layui-form-item .layui-form-mid{float: right;padding: 0px 0!important;font-size: 12px;}
	.dsn-panel .slider-span input{border-radius: 5px;height: 30px;line-height: 30px;}
	.dsn-panel .slider{width: 150px;}
	.layui-btn-primary:hover {border-color: #3772E8;color: #333}
</style>
<div class="dsn-panel-editor-cube">
	<div class="dsn-panel-editor-title">图片魔方</div>
	<div class="dsn-panel-editor-content">
		<div class="layui-form-item" style="margin-top: 15px;">
			<div class="layui-form-label">与上方距离</div>
			<div class="slider" min="0" max="40" ng-model="Edit.params.margin_y"></div>
			<span class="slider-span"><input ng-model="Edit.params.margin_y"/> px</span>
		</div>
		<div class="layui-form-item">
			<div class="layui-form-label">背景颜色</div>
			<div class="layui-input-inline" style="width:180px">
				<input class="layui-input" value="{{Edit.params.bgcolor}}" ng-model="Edit.params.bgcolor"/>
			</div>
			<span class="colorpicker" coloralpha="1" ng-model="Edit.params.bgcolor"></span>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-inline" style="width:100%;box-sizing: border-box;">
				<div class="">设置图片布局</div>
				<table id="cube-editor" style ="margin-top:10px">
					<tr ng-repeat="(x, row) in Edit.params.layout ">
						<td ng-repeat="(y, col) in row" class="{{col.classname}} rows-{{col.rows}} cols-{{col.cols}}" ng-click="col['isempty'] ? showSelection(Edit, x, y) : changeItem(Edit, x, y)" ng-class="{'empty' : col.isempty, 'not-empty' : !col.isempty}" rowspan="{{col.rows}}" colspan="{{col.cols}}"  x="{{x}}" y="{{y}}">
							<div ng-if="col.isempty">+</div>
							<div ng-if="!col.imgurl && !col.isempty">{{col.cols * 160}} * {{col.rows * 160}}</div>
							<div ng-if="!col.isempty && col.imgurl"><img ng-src="{{col.imgurl}}" style="width:{{col.cols * 85}}px;max-height:{{col.rows * 85}}px;"/></div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="dsn-panel-editor-relative" ng-show="Edit.params.currentLayout.isempty == false" style="margin-bottom:15px;">
			<div class="dsn-panel-editor-del" title="移除" style="top:6px" ng-click="delCube(Edit,Edit.params.currentLayout.classname,Edit.params.currentLayout.cols,Edit.params.currentLayout.rows)">×</div>
			<div class="dsn-panel-editor-line flex">
				<div ng-click="uploadImgChild(Edit.id, Edit.params.currentLayout.classname,'cube')" class="dsn-panel-editor-goodimg flex0" style="width:88px;height:88px"
				ng-style="{'background':'url(' + Edit.params.currentLayout.imgurl + ')','backgroundRepeat':'no-repeat','backgroundPosition':'center','backgroundSize': 'contain'}">
					<!-- <img width="100%" ng-show="Edit.params.currentLayout.imgurl" ng-src="{{Edit.params.currentLayout.imgurl}}"> -->
					<img ng-show="!Edit.params.currentLayout.imgurl" src="{$Think.const.PRE_URL}/static/admin/img/uploadimg.png" style="width:88px;height:88px" />
					<div ng-show="Edit.params.currentLayout.imgurl" class="dsn-panel-editor-goodimg-t2">重新选择图片</div>
				</div>
				<div class="dsn-panel-editor-line-right flex-y-center">
					<div>
						<div class="layui-form-item flex-x-center" style="width:85%;">
							<div class="layui-form-label" style="width: 100%;">建议尺寸: {{Edit.params.currentLayout.cols * 160}} × {{Edit.params.currentLayout.rows * 160}} 像素</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-inline flex-y-center">
								<input class="layui-input" value="" ng-model="Edit.params.currentLayout.hrefurl" placeholder='链接地址'/>
								<div class="icon-input" ng-click="chooseUrl(Edit.id, Edit.params.currentLayout.classname,'cube')">
									<img src="{$Think.const.PRE_URL}/static/admin/img/diyadd.png"/>
								</div>
							</div>
							<span class="layui-form-mid layui-word-aux" style="float: left;">{{Edit.params.currentLayout.hrefname}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="{{Edit.id}}-modal-cube-layout" style="display:none" role="dialog" aria-hidden="false">
			<div class="layout-table" style="padding-left:70px">
				<ul class="layout-cols layout-rows-{{col.rows}}" style="clear:both" ng-repeat="row in Edit.params.selection">
					<li data-cols="{{col.cols}}" data-rows="{{col.rows}}" ng-click="selectLayout(Edit, Edit.params.currentPos.row, Edit.params.currentPos.col, col.rows, col.cols)" ng-repeat="col in row"></li>
				</ul>
			</div>
		</div>
		<hr>
		<div class="layui-form-item">
			<div class="layui-form-label">左右边距</div>
			<div class="slider" min="0" max="40" ng-model="Edit.params.margin_x"></div>
			<span class="slider-span"><input ng-model="Edit.params.margin_x"/> px</span>
		</div>
		<div class="layui-form-item">
			<div class="layui-form-label">左右内边距</div>
			<div class="slider" min="0" max="40" ng-model="Edit.params.padding_x"></div>
			<span class="slider-span"><input ng-model="Edit.params.padding_x"/> px</span>
		</div>
		<div class="layui-form-item">
			<div class="layui-form-label">上下内边距</div>
			<div class="slider" min="0" max="40" ng-model="Edit.params.padding_y"></div>
			<span class="slider-span"><input ng-model="Edit.params.padding_y"/> px</span>
		</div>
		{if !$type}
		{if !$noshow_modules || !in_array('ModulePlatform',$noshow_modules)}
		<div class="layui-form-item">
			<div class="layui-form-label">显示平台</div>
			<div class="layui-input-inline" style="border-radius: 0;padding: 2px;">
				<input class="checkbox" type="checkbox" lay-skin="primary" title="所有平台" name="{{Edit.id}}_platform['all']" ng-model="Edit.params.platform['all']"/>
				{foreach $platform as $pl}
				<input class="checkbox" type="checkbox" lay-skin="primary" title="{:getplatformname($pl)}" name="{{Edit.id}}_platform['{$pl}']" ng-model="Edit.params.platform['{$pl}']"/>
				{/foreach}
			</div>
		</div>
		{/if}
		{if !$noshow_modules || !in_array('ModuleQuanxian',$noshow_modules)}
		<div class="layui-form-item">
			<div class="layui-form-label">显示范围</div>
			<div class="layui-input-inline" style="border-radius: 0;padding: 2px;">
				<input class="checkbox" type="checkbox" lay-skin="primary" title="所有人" name="{{Edit.id}}_quanxian['all']" ng-model="Edit.params.quanxian['all']"/>
				{foreach $memberlevelList as $lv}
				<input class="checkbox" type="checkbox" lay-skin="primary" title="{$lv.name}" name="{{Edit.id}}_quanxian[{$lv.id}]" ng-model="Edit.params.quanxian[{$lv.id}]"/>
				{/foreach}
			</div>
		</div>
		{/if}
		{include file="designer_page/tempnew/edit-plugin-mendian" /}
	<div class="layui-form-item" ng-show="!Edit.params.quanxian['all']">
    <div class="layui-form-label">显示用户</div>
    <div class="layui-input-inline" style="border-radius: 0;padding: 2px;">
			<input class="layui-input" ng-model="Edit.params.showmids"/>
    </div>
		<div class="layui-form-mid layui-word-aux">填写用户ID，多个用英文标点逗号(,)分割
	</div>
	{else}
		<input class="checkbox" type="hidden" checked='true' lay-skin="primary" title="所有平台" name="{{Edit.id}}_platform['all']" ng-model="Edit.params.platform['all']"/>
		<input class="checkbox" type="hidden" checked='true' lay-skin="primary" title="所有人" name="{{Edit.id}}_quanxian['all']" ng-model="Edit.params.quanxian['all']"/>
		<input class="checkbox" type="hidden" checked='true' lay-skin="primary" title="所有门店" name="{{Edit.id}}_mendian['all']" ng-model="Edit.params.mendian['all']"/>
	{/if}
</div>